<template>
  <el-descriptions :class="{ 'kefu-descriptions': column === 1 }" :column="column">
    <el-descriptions-item>
      <template #label>
        <descriptions-item-label icon="ep:document" label="姓名" />
      </template>
      {{ formatIdCard(creditApplication?.name) || '无' }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <descriptions-item-label icon="ep:user" label=" 年龄 " />
      </template>
      {{  creditApplication?.age || '无' }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <descriptions-item-label icon="ep:document" label=" 身份证号 " />
      </template>
      {{ formatIdCard(creditApplication?.idCardNumber) || '无' }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <descriptions-item-label icon="ep:phone" label=" 手机号 " />
      </template>
      {{ formatPhone(creditApplication?.phoneNumber) || '无' }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <descriptions-item-label icon="ep:briefcase" label=" 工作单位 " />
      </template>
      {{ creditApplication?.companyName || '无' }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <descriptions-item-label icon="ep:briefcase" label=" 职位 " />
      </template>
      {{ creditApplication?.position || '无' }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <descriptions-item-label icon="ep:money" label=" 工作地址 " />
      </template>
      {{ creditApplication?.companyAddress || '无' }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <descriptions-item-label icon="ep:money" label=" 年收入 " />
      </template>
      {{ creditApplication?.annualIncome || '无' }}
    </el-descriptions-item>
  </el-descriptions>

  <!-- 详情弹窗 -->

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DescriptionsItemLabel } from '@/components/Descriptions'
import * as UserApi from '@/api/member/user'
import * as CreditApplicationApi from '@/api/system/creditapplication'

withDefaults(defineProps<{ 
  user: UserApi.UserVO; 
  creditApplication: CreditApplicationApi.CreditApplicationVO; 
  column?: number 
}>(), {
  column: 2
})

// 详情弹窗状态
const showDetailDialog = ref(false)
const formLabelWidth = ref('180px')

// 格式化身份证号显示（掩码处理）
const formatIdCard = (idCard: string) => {
  if (!idCard) return ''
  return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')
}

// 格式化手机号显示（掩码处理）
const formatPhone = (phone: string) => {
  if (!phone) return ''
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 格式化申请状态
const formatStatus = (status: string) => {
  const statusMap = {
    'APPROVED': '已通过',
    'REJECTED': '已拒绝',
    'PENDING': '审核中',
    'DRAFT': '草稿'
  }
  return statusMap[status] || status
}
</script>

<style lang="scss" scoped>
.cell-item {
  display: inline;
}

.cell-item::after {
  content: ':';
}

.kefu-descriptions {
  ::v-deep(.el-descriptions__cell) {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-descriptions__label {
      width: 120px;
      display: block;
      text-align: left;
    }

    .el-descriptions__content {
      flex: 1;
      text-align: end;
    }
  }
}
</style>
